
<!--题目1，显示隐藏按钮----------------
<template>
  <div>
    <div><input type="button" value="切换显示/隐藏" @click="btn"></div>
    <div>&nbsp;</div>
    <div>&nbsp;<p v-if="text">这是一段文本内容</p></div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const text = ref(true)
const btn = ()=>{
  text.value=!text.value
}
</script>-->
<!--题目2，显示隐藏切换----------------
<template>
  <div>
    <div><input type="button" value="显示" @click="btnOne"><input type="button" value="隐藏" @click="btnTwo"></div>
    <div>&nbsp;</div>
    <div>&nbsp;<p v-show="text">这是一段文本</p></div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const text = ref(true)
const btnOne = ()=>{
  text.value=true
}
const btnTwo = ()=>{
  text.value=false
}
</script>-->
<!--题目3，条件渲染列表------------------->
<template>
  <div>
    <div><input type="text" v-model="textOne"><input type="button" value="添加到列表" @click="btn"></div>
    <div>
      <table>
        <tbody>
          <tr>
            <td v-for="item in text":id="item.id">{{ item.value }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script setup>
import { ref,reactive } from 'vue';
const text = reactive("")
const textOne=ref("")
const btn = ()=>{
  text.push(textOne.value)
}
</script>